<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="800px"
    @open="handleDialogOpen()" v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <h3>作业范围分配</h3>
    <div v-show="add" style="text-align:right">
      <el-button type="danger" @click="bc">保存</el-button>
      <el-button @click="returnPage">返回</el-button>
    </div>

  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true"
   @mousemove="syncPolyline"
  @click="paintPolyline"
  @rightclick="newPolyline">
  <bm-control>
    <el-button @click="toggle('polyline')" type="danger">{{ polyline.editing ? '完成绘制' : '开始绘制' }}</el-button>
    <el-button @click="removes()">删除围栏</el-button>
  </bm-control>
  <bm-polyline :path="path" v-for="path of polyline.paths"></bm-polyline>
  </baidu-map>
  </el-dialog>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
    data() {
    return {
      polyline:{
      editing: false,
      paths:[],
      },
      add:true,
      loading: false,
      Model: {

      },
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      form: {

      },
    }
 },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.dialogProps.action === 'add') {
            this.doSavekdy()
          }
        } else {
          return false
        }
      })
    },
    removes(){
      this.polyline.paths.clearOverlays();//删除折线
    },
    toggle (name) {
      this[name].editing = !this[name].editing
    },
    syncPolyline (e) {
      if (!this.polyline.editing) {
        return
      }
      const {paths} = this.polyline
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    newPolyline (e) {
      if (!this.polyline.editing) {
        return
      }
      const {paths} = this.polyline
      if(!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    paintPolyline (e) {
      if (!this.polyline.editing) {
        return
      }
      const {paths} = this.polyline
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },

    //返回
     returnPage(){
        window.history.go(0)
      },
      //保存
      bc(){

      },
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['Form'].clearValidate()
      })
    },
    components:{BaiduMap},

    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },

  // createMap(){
  //   console.log(11111)
  //       var map = new BMapGL.Map("container");
  //       map.centerAndZoom(new BMapGL.Point(112.945473,28.234889), 11);//xx市区经纬度
	// 	    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	// 	    var start = new BMapGL.Point(112.893839,28.119959);//起点经纬度
  //   	  var end = new BMapGL.Point(112.903411,28.138078);//终点经纬度
  //       var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
  //       driving.search(start, end);
  // },
   mounted: function() {
    this.$nextTick(() => {
      this.$on('openzyfpfwDialog', function() {
        this.dialogProps.action = 'edit'
        this.dialogProps.title = ''
        this.dialogProps.visible = true
      })
    })
  }
}
</script>

<style>
.map {
      margin-top: 20px;
      height: 700px;
     }
</style>
